<template>
  <div>
    <img src="./eg_tulip.jpg" id="ar_01" style="display: none;" alt="error">
    <div id="container">
      <canvas id="cas" width="200" height="200">
        暂时不支持
      </canvas>
    </div>

    <button @click="aaa">画图</button>
    <button @click="bbb">清图</button>
  </div>
</template>

<script>

export default {
  name: 'Canvas',
  mounted() {
  },
  methods: {
    aaa() {
      var c = document.getElementById("cas");
      var ctx = c.getContext("2d");
      var img = document.getElementById("ar_01");
      ctx.drawImage(img, 0, 0, 150, 100);
      console.info("----->")
      //ctx.clearRect(10, 10, 150, 100);
    }, bbb() {
      var c = document.getElementById("cas");
      var ctx = c.getContext("2d");
      ctx.clearRect(0, 0, 149, 99);
    }
  }
}
</script>

<style scoped>
#container{
  background-color: #1c84c6;
}
#cas{
  background-color: yellow;
}
</style>
